<template>
  <div class="page_root" data-page-name="1#生料磨系统" data-page-identification="j_02jncvmuxs">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_sozg2nietu 自定义模板_o1eqfp7a32 -->
      <a-spin :spinning="loading">
        <div class="page-wrap">
          <a-space class="first">
            <span>【1#生料磨系统】</span>
            <span>{{ timer.num1 }} {{ timer.num2 }}</span>
          </a-space>
          <div class="second">
            <div class="second-wrap">
              <div>
                <div class="item left-border">主机电耗</div>
                <div class="item">
                  <div class="mr8">主机单耗汇总:</div>
                  <div>{{ pageData.realtimePower }}kwh/t</div>
                </div>
                <div class="item">
                  <div class="mr8">磨主电机:</div>
                  <div>{{ pageData.realtimeSumMo }}kwh/t</div>
                </div>
                <div class="item">
                  <div class="mr8">循环风机:</div>
                  <div>{{ pageData.realtimeFengji }}kwh/t</div>
                </div>
                <div class="item font-s">
                  <div class="mr8">台时:</div>
                  <div>{{ pageData.realtimeMachineHours }}</div>
                </div>
                <div class="item font-s">
                  <div class="mr8">细度(80um)%:</div>
                  <div>{{ pageData.realtime80um }}</div>
                </div>
                <div class="item font-s">
                  <div class="mr8">细度(0.2mm)%:</div>
                  <div>{{ pageData.realtime200um }}</div>
                </div>
              </div>
              <div>
                <div class="item flex-between color-g"><sync-outlined class="mr4" /><span>模拟优化</span></div>
                <div class="item">
                  <div class="mr8">主机单耗汇总:</div>
                  <div class="color-g">{{ pageData.resultPower }}kwh/t</div>
                </div>
                <div class="item">
                  <div class="mr8">磨主电机:</div>
                  <div class="color-g">{{ pageData.resultSumMo }}kwh/t</div>
                </div>
                <div class="item">
                  <div class="mr8">循环风机:</div>
                  <div class="color-g">{{ pageData.resultFengji }}kwh/t</div>
                </div>
                <div class="item">
                  <div class="mr8">台时:</div>
                  <div class="color-g">{{ pageData.resultMachineHours }}kwh/t</div>
                </div>
                <div class="item font-s">
                  <div class="mr8">细度(80um)%:</div>
                  <div class="color-g">{{ pageData.result80um }}</div>
                </div>
                <div class="item font-s">
                  <div class="mr8">细度(0.2mm)%:</div>
                  <div class="color-g">{{ pageData.result200um }}</div>
                </div>
              </div>
            </div>
          </div>

          <div class="main">
            <div class="main-header flex-between">
              <div class="flex-between">
                <div class="title main-title">寻优方案</div>
                <a-radio-group :value="2">
                  <a-radio :value="1">
                    <span class="radio">自动调优下发</span>
                  </a-radio>
                  <a-radio :value="2"><span class="radio">手动调优下发</span></a-radio>
                </a-radio-group>
              </div>
              <a-space>
                <a-button class="btn" type="primary" @click="handlerAlgorithmTuning">调优</a-button>
                <a-button class="btn" type="primary">下发</a-button>
              </a-space>
            </div>
            <a-row :gutter="[16, 8]">
              <a-col :span="12">
                <div class="col-wrap">
                  <div>
                    <div class="title">立磨MV工艺参数</div>
                    <div class="flex-x">
                      <div class="card width-19" :class="[item.id ? '' : 'v-hidden']" v-for="item in data1" :key="item.id">
                        <lock-filled v-if="item.lockFlag" class="lock-text lock" @click=";(item.lockFlag = !item.lockFlag), handlerUpdate(item.id, { lockFlag: item.lockFlag })" />
                        <unlock-filled v-else class="lock-text unlock" @click=";(item.lockFlag = !item.lockFlag), handlerUpdate(item.id, { lockFlag: item.lockFlag })" />
                        <div>
                          <div>
                            <a-tooltip>
                              <template #title>
                                <span class="s-title">{{ item.pointName }}</span>
                              </template>
                              <span class="s-title">{{ item.pointName }}</span>
                            </a-tooltip>
                          </div>
                          <div class="num">
                            <a-tooltip>
                              <template #title>
                                {{ item.resultValue }}
                              </template>
                              <a-input
                                :defaultValue="item.resultValue"
                                :disabled="item.lockFlag"
                                @blur="
                              e => ((item.resultValue = e.target.value), changeResultValue(item.id, e.target.value))
                            "
                              />
                            </a-tooltip>
                          </div>
                        </div>
                        <div class="flex-x edit-row">
                          <a-input :defaultValue="item.minValue" @blur="e => changeMinValue(item.id, e.target.value)" />
                          <span>~</span>
                          <a-input :defaultValue="item.maxValue" @blur="e => changeMaxValue(item.id, e.target.value)" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="title">立磨CV工艺参数</div>
                    <div class="flex-x">
                      <div class="card width-19" :class="[item.id ? '' : 'v-hidden']" v-for="item in data2" :key="item.id">
                        <!-- <lock-filled v-if="item.lockFlag" class="lock-text lock" @click="handlerUpdate(item.id, {lockFlag: !item.lockFlag})" />
                  <unlock-filled v-else class="lock-text unlock" @click=";(item.lockFlag = !item.lockFlag), handlerUpdate(item.id, { lockFlag: item.lockFlag })" /> -->
                        <div>
                          <div>
                            <a-tooltip>
                              <template #title>
                                <span class="s-title">{{ item.pointName }}</span>
                              </template>
                              <span class="s-title">{{ item.pointName }}</span>
                            </a-tooltip>
                          </div>
                          <div class="num">
                            <a-tooltip>
                              <template #title>
                                {{ item.resultValue }}
                              </template>
                              <a-input
                                :defaultValue="item.resultValue"
                                :disabled="true"
                                @blur="
                              e => ((item.resultValue = e.target.value), changeResultValue(item.id, e.target.value))
                            "
                              />
                            </a-tooltip>
                          </div>
                        </div>
                        <div class="flex-x edit-row">
                          <a-input :defaultValue="item.minValue" @blur="e => changeMinValue(item.id, e.target.value)" />
                          <span>~</span>
                          <a-input :defaultValue="item.maxValue" @blur="e => changeMaxValue(item.id, e.target.value)" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </a-col>
              <a-col :span="12">
                <div class="col-wrap">
                  <div>
                    <div class="title">循环风机+选粉机MV工艺参数</div>
                    <div class="flex-x">
                      <div class="card width-19" :class="[item.id ? '' : 'v-hidden']" v-for="item in data3" :key="item.id">
                        <lock-filled v-if="item.lockFlag" class="lock-text lock" @click=";(item.lockFlag = !item.lockFlag), handlerUpdate(item.id, { lockFlag: item.lockFlag })" />
                        <unlock-filled v-else class="lock-text unlock" @click=";(item.lockFlag = !item.lockFlag), handlerUpdate(item.id, { lockFlag: item.lockFlag })" />
                        <div>
                          <div>
                            <a-tooltip>
                              <template #title>
                                <span class="s-title">{{ item.pointName }}</span>
                              </template>
                              <span class="s-title">{{ item.pointName }}</span>
                            </a-tooltip>
                          </div>
                          <div class="num">
                            <a-tooltip>
                              <template #title>
                                {{ item.resultValue }}
                              </template>
                              <a-input
                                :defaultValue="item.resultValue"
                                :disabled="item.lockFlag"
                                @blur="
                              e => ((item.resultValue = e.target.value), changeResultValue(item.id, e.target.value))
                            "
                              />
                            </a-tooltip>
                          </div>
                        </div>
                        <div class="flex-x edit-row">
                          <a-input :defaultValue="item.minValue" @blur="e => changeMinValue(item.id, e.target.value)" />
                          <span>~</span>
                          <a-input :defaultValue="item.maxValue" @blur="e => changeMaxValue(item.id, e.target.value)" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="title">循环风机+选粉机CV工艺参数</div>
                    <div class="flex-x">
                      <div class="card width-19" :class="[item.id ? '' : 'v-hidden']" v-for="item in data4" :key="item.id">
                        <!-- <lock-filled v-if="item.lockFlag" class="lock-text lock" @click="handlerUpdate(item.id, {lockFlag: !item.lockFlag})" />
                  <unlock-filled v-else class="lock-text unlock" @click=";(item.lockFlag = !item.lockFlag), handlerUpdate(item.id, { lockFlag: item.lockFlag })" /> -->
                        <div>
                          <div>
                            <a-tooltip>
                              <template #title>
                                <span class="s-title">{{ item.pointName }}</span>
                              </template>
                              <span class="s-title">{{ item.pointName }}</span>
                            </a-tooltip>
                          </div>
                          <div class="num">
                            <a-tooltip>
                              <template #title>
                                {{ item.resultValue }}
                              </template>
                              <a-input
                                :defaultValue="item.resultValue"
                                :disabled="true"
                                @blur="
                              e => ((item.resultValue = e.target.value), changeResultValue(item.id, e.target.value))
                            "
                              />
                            </a-tooltip>
                          </div>
                        </div>
                        <div class="flex-x edit-row">
                          <a-input :defaultValue="item.minValue" @blur="e => changeMinValue(item.id, e.target.value)" />
                          <span>~</span>
                          <a-input :defaultValue="item.maxValue" @blur="e => changeMaxValue(item.id, e.target.value)" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-wrap mt-16 pb-71">
                  <div>
                    <div class="title left-border">质量约束</div>
                    <div class="flex-x flex-start">
                      <div class="card width-19" :class="[item.id ? '' : 'v-hidden']" v-for="item in data5" :key="item.id">
                        <lock-filled v-if="item.lockFlag" class="lock-text lock" @click=";(item.lockFlag = !item.lockFlag), handlerUpdate(item.id, { lockFlag: item.lockFlag })" />
                        <unlock-filled v-else class="lock-text unlock" @click=";(item.lockFlag = !item.lockFlag), handlerUpdate(item.id, { lockFlag: item.lockFlag })" />
                        <div class="num2">
                          <span class="s-title">{{ item.pointName }}</span>
                        </div>
                        <div class="flex-x edit-row">
                          <a-input :defaultValue="item.minValue" :disabled="item.lockFlag" @blur="e => changeMinValue(item.id, e.target.value)" />
                          <span>~</span>
                          <a-input :defaultValue="item.maxValue" :disabled="item.lockFlag" @blur="e => changeMaxValue(item.id, e.target.value)" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-spin>
      <!-- end vid_sozg2nietu 自定义模板_o1eqfp7a32 -->
    </a-spin>
  </div>
</template>
<script setup>
  import {
      h, ref, reactive, toRaw, markRaw, watch, computed,
      onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
    } from "vue";
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, isNullOrEmpty, isEmptyArr, isNullOrUnDef, localGet, isContained, isArray, isEmpty,
      merge, getDifferenceArray, isObject, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission } from '@/utils/index';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format';
    
    import UserTableRecords from '@/model/UserTableRecords';
    



      // 获取传入的流程ID
      const props = defineProps({
        processInstanceId: {
            type: String
        }
      })
      const immediateWatch = (source, callback) => {
        watch(source, callback, {deep: true,immediate: true })
      }



  /* -------------------------- 属性定义 -------------------------- */

      const setTimeOutList = [];
      const pageLoading = reactive({
        loading: false,
        tip: undefined
      });




      // 处理校验
      const setSubFormName =(parentInfo, name)=>{
        return [parentInfo.parents, parentInfo.cycleIndex, name];
      }


  /* ========================== 属性定义 ========================== */


  /* -------------------------- 元素数据引用 -------------------------- */


  /* ========================== 元素数据引用 ========================== */


  /* -------------------------- 页面数据 -------------------------- */

  /* ========================== 页面数据 ========================== */


  /* -------------------------- 响应 -------------------------- */

  /* ========================== 响应 ========================== */


  /* -------------------------- 函数 -------------------------- */

  /* ========================== 函数 ========================== */


  /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId,
    })

  /* ========================== 页面参数 ========================== */


  /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================


  /* ========================== 组件事件处理方法 ========================== */


  /* -------------------------- 生命周期 -------------------------- */
  onMounted(() => {

    });

    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });

  /* ========================== 生命周期 ========================== */


  /* -------------------------- 数据关联处理 -------------------------- */





  /* -------------------------- 表单数据同步 -------------------------- */
  /* ========================== 表单数据同步 ========================== */

  /* ========================== 数据关联处理 ========================== */


  /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

  /* ========================== 不同组件自定义的处理逻辑 ========================== */


  // ================================定制化逻辑========================================
  function changeDataLength(data = [], len = 5) {
      const needArrLen = len - (data.length % len === 0 ? len : data.length % len)
      const arr = new Array(needArrLen)
      arr.fill({})
      return data.concat(arr)
    }

    const data1 = ref([])
    const data2 = ref([])
    const data3 = ref([])
    const data4 = ref([])
    const data5 = ref([])

    const pageData = reactive({})

    const loading = ref(false)

    function getPageData() {
      loading.value = true
      data1.value = []
      data2.value = []
      data3.value = []
      data4.value = []
      data5.value = []
      post('/solution-qlszx/api/v1/power/optimize', { mill: '1#生料磨' })
        .then(({ data }) => {
          const { machineTechniqueSettingMap, ...others } = data
          Object.assign(pageData, others)

          data1.value = changeDataLength(machineTechniqueSettingMap['立磨MV工艺参数'])
          data2.value = changeDataLength(machineTechniqueSettingMap['立磨CV工艺参数'])
          data3.value = changeDataLength(machineTechniqueSettingMap['循环风机+选粉机MV工艺参数'], 5)
          data4.value = changeDataLength(machineTechniqueSettingMap['循环风机+选粉机CV工艺参数'], 5)
          data5.value = machineTechniqueSettingMap['其他质量约束']
        })
        .finally(() => {
          loading.value = false
        })
    }

    getPageData()

    function handlerUpdate(id, data) {
      put(`/solution-qlszx/api/v1/power/setting/${id}`, data).then(({ status }) => {})
    }

    function changeMinValue(id, minValue) {
      handlerUpdate(id, { minValue })
    }

    function changeMaxValue(id, maxValue) {
      handlerUpdate(id, { maxValue })
    }

    function changeResultValue(id, resultValue) {
      handlerUpdate(id, { resultValue })
    }

    function handlerAlgorithmTuning() {
      put(`/solution-qlszx/api/v1/power/algorithm_tuning`, { mill: '1#生料磨' }).then(({ status, errorMsg }) => {
        if (status === 'success') {
          message.success('调优成功')
          getPageData()
        } else {
          message.error(errorMsg)
        }
      })
    }

    onMounted(async () => {
      try {
        document.querySelector('.page_root').style.visibility = 'hidden'
        if (
          [
            'http://asa-next-internal-stage-preview.allintechinc.com',
            'https://asa-next-internal-stage.allintechinc.com'
          ].includes(location.origin)
        ) {
          document.querySelector('.page_root').style.visibility = 'visible'
        } else {
          let params = new URLSearchParams(window.location.search)
          let mestoken = params.get('mestoken')
          const res = await fetch('http://www.qlssn.net/VeGoo/data/ashx/system/systemServer.ashx?method=checkToken', {
            method: 'post',
            body: JSON.stringify({ token: mestoken })
          }).then(res => {
            return res.json()
          })
          if (res.result === 1) {
            document.querySelector('.page_root').style.visibility = 'visible'
          } else {
            parent.window.location.href = res.redirect
            return
          }
        }
      } catch (error) {}
    })

    const timer = reactive({
      num1: '',
      num2: ''
    })

    function changeTimer() {
      timer.num1 = dayjs().format('YYYY-MM-DD')
      timer.num2 = dayjs().format('HH:mm:ss')
    }

    const intervalHandler = setInterval(changeTimer)

    onUnmounted(() => {
      clearInterval(intervalHandler)
    })
</script>
<style lang="less" scoped>
  .page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
  .page_root :deep(.@{ant-prefix}-spin-nested-loading),
  .page_root :deep(.@{ant-prefix}-spin-container)
   {
      height: 100%;
  }
  .table-moreBtn_down {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
  }

  .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
  }

  /*  表格树结构样式处理，展开按钮层级增加*/
  :deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
  }
  /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
  :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
  }
  :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
  }
  :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
  }
  :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
  }

  /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
  :deep(.@{ant-prefix}-transfer-list)
   {
      height: 100%;
      width: 50%;
  }


  .page-wrap {
      background: #fff;
      font-size: 14px;
      padding-bottom: 10px;
    }

    .first {
      padding: 0 3px;
      font-size: 16px;
      color: #fff;
      line-height: 2.5;
      width: 100%;
      background: linear-gradient(to right, #1c59f4, #286de9, #3d94f7, #48a9f8);
    }

    .second {
      height: 162px;
      width: 100%;
      background: linear-gradient(to right, #0f3fb8, #2464d2, #3c91f3, #48a9f8);
    }
    .second-wrap > div {
      padding: 10px 10px 0;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: start;
    }

    .second-wrap > div:nth-child(2) {
      margin-left: -5px;
    }

    .second-wrap .item {
      display: flex;
      margin-right: 20px;
    }
    .second-wrap .item.left-border {
      text-indent: 8px;
      display: flex;
      align-items: center;
    }

    .second-wrap .item.left-border:before {
      display: inline-block;
      content: ' ';
      width: 4px;
      background: #fff;
      height: 16px;
    }

    .main {
      margin: 0 10px;
      /* transform: translateY(-85px); */
      margin: -85px 10px 0;
    }

    .main .main-title.title {
      font-size: 18px;
      color: #ffffff;
      letter-spacing: 0;
      font-weight: 600;
      width: 122px;
      height: 36px;
      line-height: 36px;
      margin-right: 16px;
      position: relative;
      background-color: #00bc9c;
      text-align: left;
      text-indent: 1em;
      border-top-left-radius: 5px;
    }

    .main .main-title.title::before {
      content: '';
      position: absolute;
      top: 0;
      right: -30px;
      width: 30px;
      height: 100%;
      background-color: #1447be;
      transform-origin: bottom right;
      transform: skewX(22deg);
    }

    .col-wrap {
      background: #f0f2f5;
      border: 1px solid #3875ff;
      border-radius: 4px;
      padding: 8px;
    }

    .col-wrap .title {
      font-size: 14px;
      color: #00bc9c;
      letter-spacing: 0;
      font-weight: 600;
      text-align: left;
      line-height: 2;
    }

    /* .l-title {
      text-align: center;
      font-weight: 550;
      height: 20px;
    } */

    .s-title {
      width: 90%;
      display: inline-block;
      text-align: center;
      line-height: 15px;
    }

    .color-g {
      color: #3cff86;
    }

    .font-s {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
    }

    .title {
      font-size: 16px;
      font-weight: 550;
      text-align: center;
    }

    .flex-between {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .flex-x {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }

    .flex-start.flex-x {
      justify-content: start;
    }

    .edit-row {
      flex-wrap: nowrap;
      align-items: center;
    }
    .edit-row input {
      width: 45%;
      font-size: 12px;
      font-weight: 600;
      text-overflow: clip;
      text-align: center;
      padding: 4px 0;
    }

    .card {
      background: #fff;
      padding: 10px 6px 6px;
      margin: 0 0 10px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
      border-radius: 7px;
      height: 115px;
      position: relative;
      color: #262626;
    }
    .card * {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .card .num {
      text-align: center;
      font-size: 20px;
      color: #3875ff;
      font-weight: 600;
      position: absolute;
      top: 40px;
      left: 50%;
      width: 90%;
      transform: translateX(-50%);
    }

    .card input {
      color: #262626;
    }

    .card .num input {
      font-weight: 600;
      text-overflow: clip;
      text-align: center;
      padding: 4px 0;
      color: #3875ff;
    }

    .lock-text {
      font-size: 12px;
      position: absolute;
      right: 6px;
      top: 6px;
      cursor: pointer;
    }

    .lock {
      color: #262626;
    }

    .unlock {
      color: #00BC9C;
    }

    .left-border.title {
      text-indent: 8px;
      color: #262626;
      display: flex;
      align-items: center;
    }
    .title.left-border:before {
      display: inline-block;
      content: ' ';
      width: 4px;
      background: #3875ff;
      height: 16px;
    }

    .num2 {
      text-align: center;
      color: #3875ff;
      height: 60px;
      line-height: 60px;
    }

    .blod {
      font-weight: 600;
    }
    .mr8 {
      margin-right: 8px;
    }
    .btn {
      background: #014fff !important;
      transform: translateY(-8px);
    }
    .radio {
      color: rgba(255, 255, 255, 0.8);
    }

    .width-19 {
      width: 19%;
    }

    .width-24 {
      width: 24%;
    }

    .flex-start .width-19 {
      margin-right: 7px;
    }
    .mt-16 {
      margin-top: 16px;
    }

    .v-hidden {
      visibility: hidden;
    }

    .pb-71 {
      padding-bottom: 71px;
    }
    .mr4 {
      margin-right: 4px;
    }
</style>